@import './layout.scss';

@mixin btn(
  $size: 14px,
  $color: #fff,
  $bgcolor: #f04752,
  $padding: 5px,
  $radius: 5px
) {
  padding: $padding;
  background-color: $bgcolor;
  border-radius: $radius;
  border: 1px solid $bgcolor;
  font-size: $size;
  color: $color;
  text-align: center;
  line-height: 1;
  display: inline-block;
}

@mixin list($direction: column) {
  @include flex($direction);
}

@mixin panel(
  $bgcolor: #fff,
  $padding: 0,
  $margin: 20px 0,
  $height: 112px,
  $txtPadding: 0 32px,
  $color: #333,
  $fontSize: 32px
) {
  background: $bgcolor;
  padding: $padding;
  margin: $margin;
  > h4 {
    height: $height;
    line-height: $height;
    padding: $txtPadding;
    @include overflow;
    text-align: center;
    color: $color;
    font-size: $fontSize;
  }
}
@mixin overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
